import React, { useState, useMemo, memo } from 'react'

// const Child = function(props) {
//   console.log('child run...')
//   return (
//     <>
//       <h1>hello</h1>
//       <button onClick={props.onAdd}>click</button>  
//     </>
//   )
// }

const ChildHood = function(props) {
  return (
    <div>child hood</div>
  )
}

const Child = memo(function(props) {
  console.log('child run...')

  const child1 = useMemo(()=><ChildHood a={props.a}></ChildHood>, [props.a])
  const child2 = useMemo(()=><ChildHood b={props.b}></ChildHood>, [props.b])

  return (
    <>
      <h1>hello</h1>
      <button onClick={props.onAdd}>click</button>  
      {child1}
      {child2}
    </>
  )
})
// }, () => {
//   return true
// })

export default function UseCallback() {
  console.log('parent run...')
  let [count, setCount] = useState(0)

  // const handleAdd = () => {
  //   console.log('added')
  // }
  // useCallback 事件的相应函数  userMemo组件的缓存
  const handleAdd = useMemo(() => {
    return () => {
      console.log('added')
    }
  }, [])

  return (
    <div>
      <div>{count}</div>
      <Child 
        onAdd={handleAdd}
        a={'abc'}
        b={'def'}
      ></Child>
      <button onClick={()=>setCount(100)}>change count</button>
    </div>
  )
}

